<style scoped>
    .layout{
      border: 1px solid #d7dde4;
      background: #f5f7f9;
      position: relative;
    }
    .layout-breadcrumb{
      padding: 10px 15px 0;
    }
    .layout-content{
      min-height: 1200px;
      margin: 15px;
      overflow: hidden;
      background: #fff;
      border-radius: 4px;
    }
    .layout-content-main{
      padding: 10px;
    }
    .layout-copy{
      text-align: center;
      padding: 10px 0 20px;
      color: #9ea7b4;
    }
    .layout-menu-left{
        background: #464c5b;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
</style>
<template>
    <div class="layout">
        <Row type="flex">
            <Col span="5" class="layout-menu-left">
                <Menu :active-name="activity_name" :theme="theme" width="auto" ref="menu"  @on-select="afterSelect">
                    <div class="layout-logo-left"></div>
                    <Submenu v-for="(item,index) in nav" :key="index" name="{item.key}" >
                      <template slot="title">
                          <Icon type="ios-navigate"></Icon>
                          {{item.name}}  
                      </template>
                      <MenuItem :name="index"   v-for="(sub,index) in item.chirends"  >
                        {{ sub.name}} 
                      </MenuItem>
                    </Submenu>
                </Menu>
            </Col>
            <Col span="19">
                <div class="layout-header"></div>
                <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <BreadcrumbItem href="/#/recommend">Home</BreadcrumbItem>
                        <BreadcrumbItem href="#">Projects</BreadcrumbItem>
                        <BreadcrumbItem>iView</BreadcrumbItem>
                    </Breadcrumb>
                </div>
                <div class="layout-content">
                    <div class="layout-content-main">
                      <router-view/>
                    </div>
                </div>
                <div class="layout-copy">
                    2011-2018 &copy; 汉子科技
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
  import nav from './common/nav'
  export default {
    data(){
      return {
        activity_name:'0',
        theme: 'dark',
        nav: nav()  
      }
    },
    methods: {
      afterSelect(name){
        let current_nav = this.nav[0].chirends[name]
        this.activity_name = name
        this.navTo(current_nav.path)
      },
      navTo(path){
        console.log(path)
        this.$router.push({ path:path})
      }
    },
    mounted () { 
      if (this.$router.history.current) {       
        this.$nextTick(()=>{ 
          let current_router = this.$router.history.current.name
          let current_nav = this.nav[0].chirends.find( q=> q.key === current_router.toLowerCase())
          let activity_name = this.nav[0].chirends.indexOf(current_nav)
          this.activity_name = activity_name.toString()
          this.$refs.menu.updateOpened()
          this.$refs.menu.updateActiveName()
          console.log('this.$refs.menu.updateOpened',this.$refs.menu)
        })
      }
    }
  }
</script>